<template>
  <div class="card-wrap flex-column justify-end card-padding">
    <el-form :model="form" ref="carInformation" label-width="100px">
      <div class="card-title-wrap">
        <span>车辆信息</span>
        <span></span>
      </div>
      <el-button v-if="type !== 'detail'" type="text" style="margin-left: 5px;font-size: 14px;" @click="selectCar">选择车辆</el-button>
      <div class="table-title-wrap flex-row-center" style="margin-top: 10px" v-if="type == 'detail'">
        <p class="statisticInfo">车辆总数: <span>{{ form.vehicleCount }}</span></p>
        <p class="statisticInfo">已收回车辆数: <span>{{ form.reclaimedVehicleCount }}</span></p>
        <p class="statisticInfo">供应商收回车辆数: <span>{{ form.supplierReclaimedVehicleCount }}</span></p>
        <p class="statisticInfo">自行收回车辆数: <span>{{ form.selfReclaimedVehicleCount }}</span></p>
        <p class="statisticInfo">未收回车辆数: <span>{{ form.numberOfVehiclesNotRecovered }}</span></p>
      </div>
      <table-page ref="el-table" isIndex :dataList="form.carList" border :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @setSizeCurrent="getList">
        <!-- 操作插槽 -->
        <template slot="tableColAc">
          <el-table-column label="操作" align="center" width="100" class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">
              <el-button v-if="type !== 'detail'" type="text" @click="selectCustomer(row,$index)">删除</el-button>
              <el-button v-if="type == 'detail'" type="text" @click="view(row,$index)">查看</el-button>

            </template>
          </el-table-column>
        </template>
        <!-- 普通列插槽 -->
        <template slot="tableCol">
          <el-table-column label="车牌号" align="center" prop="carNo" min-width="120px" show-overflow-tooltip />
          <el-table-column label="车架号" align="center" prop="vinNo" min-width="180px" show-overflow-tooltip />
          <el-table-column label="品牌/车型/车款" align="center" prop="carInFo" min-width="360px" show-overflow-tooltip />
          <el-table-column label="车辆归属" align="center" prop="vehicleOwnerName" />
          <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="200px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
            </template>
          </el-table-column>
          <el-table-column label="出租方" v-if="type !== 'detail'" align="center" prop="lessorName" min-width="150px" show-overflow-tooltip />
          <el-table-column label="业务类型" align="center" prop="businessType">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.business_type" :value="scope.row.businessType" />
            </template>
          </el-table-column>
          <el-table-column label="订单提交人" align="center" prop="orderSubmitter" min-width="150px" show-overflow-tooltip />
          <el-table-column label="GPS状态" v-if="type !== 'detail'" align="center" prop="gpsStatus" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-select v-model="scope.row.gpsStatus" placeholder="请选择">
                <el-option v-for="item in GPSlist" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column v-if="type == 'detail'" label="GPS状态" align="center" prop="gpsStatus" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{scope.row.gpsStatus==1?'正常':'异常'  }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="type == 'detail'" label="是否收回" align="center" prop="recallOrNot" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.business_yes_no" :value="scope.row.recallOrNot" />
            </template>
          </el-table-column>
          <el-table-column v-if="type == 'detail'" label="收车信息" align="center" prop="receivingInfo" min-width="150px" show-overflow-tooltip />
          <el-table-column v-if="type == 'detail'" label="收车人信息" align="center" prop="supplierName" min-width="150px" show-overflow-tooltip />
          <el-table-column v-if="type == 'detail'" label="交付人" align="center" prop="deliveryPeople" min-width="150px" show-overflow-tooltip />
          <el-table-column v-if="type == 'detail'" label="交付时间" align="center" prop="deliveryTime" min-width="150px" show-overflow-tooltip />
          <el-table-column v-if="type == 'detail'" label="总费用" align="center" prop="totalFee" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ format_thousand(scope.row.totalFee) }}</span>
            </template>
          </el-table-column>
          <el-table-column v-if="type == 'detail'" label="是否付款" align="center" prop="whetherToPayOrNot" min-width="150px" show-overflow-tooltip>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.business_yes_no" :value="scope.row.whetherToPayOrNot" />
            </template>
          </el-table-column>
        </template>
      </table-page>
    </el-form>

    <!-- 添加或修改测试单表对话框 -->
    <el-dialog title="选择车辆" :visible.sync="open" append-to-body class="form-dialog" width="70%">
      <div style="width: 90%; margin: 0 auto;">
        <el-form ref="formDig" label-position="right" :model="formDig" label-width="160px">
          <div style="display: flex;justify-content: space-between;align-items: center;">
            <el-form-item label="车辆归属公司:" label-width="150px">
              <el-input v-model="queryParamsDig.carNo" clearable placeholder="请输入车辆归属公司" style="width: 100%;"></el-input>
            </el-form-item>
            <el-form-item label="申请数量:" label-width="80px" style="margin-left: 20px;">
              <el-input v-model="queryParamsDig.a" clearable></el-input>
            </el-form-item>
            <el-form-item label="订单编号:" label-width="80px" style="margin-left: 20px;">
              <el-input v-model="queryParamsDig.b" clearable></el-input>
            </el-form-item>
            <div style="text-align: right;margin-top: -15px;margin-left: 50px;">
              <el-button size="mini" @click="resetQueryDig">重 置</el-button>
              <el-button size="mini" type="primary" @click="handleQueryDig">查 询</el-button>
            </div>
          </div>
          <table-page ref="el-table" rowKey="userId" :isSelect="true" @selectionChange="handleSelectionChange" :loading="loadingTable" :dataList="dataListTable" border :total="totalTable" :page.sync="queryParamsDig.pageNum" :limit.sync="queryParamsDig.pageSize" @setSizeCurrent="getListTable">
            <!-- 普通列插槽 -->
            <template slot="tableCol">
              <el-table-column label="车牌号" align="center" prop="carNo" min-width="100px" show-overflow-tooltip />
              <el-table-column label="车架号" align="center" prop="vinNo" min-width="140px" show-overflow-tooltip />
              <el-table-column label="品牌/车型/车款" align="center" prop="carInFo" min-width="360px" show-overflow-tooltip />
              <el-table-column label="车辆归属" align="center" prop="vehicleOwnerName" />
              <el-table-column label="额度申请编号" align="center" prop="calcSchemeCode" min-width="200px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span @click="goToDetail(scope.row.calcSchemeId, scope.row.processId)" style="color: #1890ff; cursor: pointer">{{ scope.row.calcSchemeCode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="订单编号" align="center" prop="orderCarCode" min-width="200px" show-overflow-tooltip>
                <template slot-scope="scope">
                  <span @click="orderDetail(scope.row)" style="color: #1890ff; cursor: pointer">{{ scope.row.orderCarCode }}</span>
                </template>
              </el-table-column>
              <el-table-column label="订单编号" align="center" prop="createTime" min-width="140px" show-overflow-tooltip />
              <el-table-column label="出租方" align="center" prop="lessorName" min-width="140px" show-overflow-tooltip />
            </template>
          </table-page>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button @click="cancelDig">取消</el-button>
        <el-button type="primary" @click="submitForm">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SearchContent from "@/components/SearchContent/index.vue";
import { getUseList } from "@/api/collectionModule";
export default {
  // 车辆信息
  name: 'carInformation',
  dicts: ['business_type', 'business_yes_no'],
  components: {
    SearchContent
  },
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: '',
    },
  },
  computed: {
    form: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit("input", val);
      },
    },
    type() {
      let status
      switch (this.state) {
        case 'write':
          status = 'edit'
          break
        case 'disabled':
          status = 'detail'
          break
        case 'readonly':
          status = 'detail'
          break
        case 'detail':
          status = 'detail'
          break
        case 'edit':
          status = 'edit'
        case 'add':
          status = 'add'
          break
      }
      return status
    },
  },
  data() {
    return {
      dataListTable: [],
      multipleSelection: [],
      totalTable: 0,
      loadingTable: false,
      formDig: {},
      open: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsDig: {
        pageNum: 1,
        pageSize: 10,
      },
      GPSlist: [
        {
          label: '正常',
          value: 1
        },
        {
          label: '异常',
          value: 2
        }
      ],
      idList: []
    };
  },
  watch: {
    dataList: {
      handler(Val) {
        this.$nextTick(() => {
          Val?.forEach((v) => {
            this.idList?.forEach((j) => {
              if (
                v.userId == j
              ) {
                this.$refs['el-table'].table_toggleRowSelection(v, true)
              }
            });
          });
        });
      },
      immediate: true, // 立即生效
      deep: true  //监听对象或数组的时候，要用到深度监听
    },
  },
  created() {
    this.getListTable();
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.open = false
      let newArray = this.multipleSelection.map(v => {
        return {
          ...v
        }
      })
      this.idList = this.multipleSelection.map(v => v.userId)
      this.form.carList = [...newArray]
    },
    // 取消按钮
    cancelDig() { this.open = false },
    /**
     *重置
     */
    resetQueryDig() {
      this.queryParamsDig = {
        pageNum: 1,
        pageSize: 10,
      }
      this.getListTable()
    },
    /**
     *搜索
     */
    handleQueryDig() {
      this.getListTable()
    },
    /**
     *弹窗接口
     */
    async getListTable() {
      this.loadingTable = true;
      try {
        let res = await getUseList(this.queryParamsDig)
        const { rows, total } = res;
        this.dataListTable = rows;
        this.totalTable = total;
        this.loadingTable = false;
      } catch (error) {

      }
    },
    // 多选按钮
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    /**
     * 选择载具
     */
    selectCar() { this.open = true },
    /**
     * 删除车辆功能
     */
    selectCustomer(row, index) {
      this.$confirm('确认删除该车辆?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.form.carList.splice(index, 1)
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    view() {
      this._toPage({
        path: "/pickUpTheCar/receivingSupplierDetails",
        name: "ReceivingSupplierDetails",
        query: {
          type: 'detail',
        }
      });
    },
    getList() { },
    /**
     *额度跳转
     */
    goToDetail(calcSchemeId) {
      this._toPage({
        path: '/quota/ApplyDetails',
        query: {
          calcSchemeId,
        },
      })
    },
    /**
     *订单详情
     */
    orderDetail(row) {
      this._toPage({
        name: "SuborderDetail",
        query: {
          id: row.orderCarId,
          orderCarCode: row.orderCarCode,
        },
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.statisticInfo {
  color: #464646;
  font-size: 14px;
  margin-right: 10px;

  span {
    color: #1884ff;
  }
}
</style>
